<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>光宗耀祖 - 量子科技系统</title>
    <meta name="description" content="未来科技管理平台">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">
        :root {
            --neon-blue: #0ff0fc;
            --neon-pink: #ff2ced;
            --neon-purple: #9600ff;
            --neon-green: #00ff9d;
            --dark-space: #0a0a1a;
            --cyber-text: #e0e0ff;
            --glow-blue: 0 0 15px rgba(0, 240, 252, 0.8);
            --glow-pink: 0 0 15px rgba(255, 44, 237, 0.8);
        }

        body {
            background-color: var(--dark-space);
            color: var(--cyber-text);
            font-family: 'Orbitron', sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
            position: relative;
            perspective: 1000px;
        }

        /* 赛博朋克网格背景 */
        .cyber-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                linear-gradient(rgba(150, 0, 255, 0.2) 1px, transparent 1px),
                linear-gradient(90deg, rgba(150, 0, 255, 0.2) 1px, transparent 1px);
            background-size: 50px 50px;
            opacity: 0.3;
            z-index: 0;
        }

        /* 动态粒子背景 */
        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* 霓虹光带 */
        .neon-strip {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg,
                transparent,
                var(--neon-blue),
                var(--neon-pink),
                transparent);
            box-shadow: var(--glow-blue), var(--glow-pink);
            filter: blur(1px);
            animation: neonFlow 8s linear infinite;
            z-index: 2;
        }

        @keyframes neonFlow {
            0% { opacity: 0; transform: translateX(-100%); }
            5% { opacity: 1; }
            95% { opacity: 1; }
            100% { opacity: 0; transform: translateX(100%); }
        }

        /* 3D登录卡片 */
        .cyber-card {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 1000px;
            height: 600px;
            background: rgba(10, 10, 26, 0.7);
            border-radius: 20px;
            box-shadow:
                0 0 30px rgba(0, 240, 252, 0.3),
                0 0 60px rgba(150, 0, 255, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 240, 252, 0.3);
            overflow: hidden;
            z-index: 10;
            display: flex;
            transition: all 0.5s ease;
        }

        .cyber-card:hover {
            box-shadow:
                0 0 50px rgba(0, 240, 252, 0.5),
                0 0 90px rgba(150, 0, 255, 0.5);
        }

        /* 左侧光效面板 */
        .cyber-panel {
            flex: 1;
            background: linear-gradient(135deg,
                rgba(0, 240, 252, 0.1) 0%,
                rgba(150, 0, 255, 0.3) 100%);
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .cyber-panel::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                45deg,
                transparent 48%,
                rgba(0, 240, 252, 0.1) 50%,
                transparent 52%
            );
            animation: shine 6s infinite linear;
        }

        @keyframes shine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .cyber-logo {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }

        .cyber-logo img {
            width: 150px;
            height: auto;
            filter: drop-shadow(0 0 15px rgba(0, 240, 252, 0.7));
            transition: all 0.5s ease;
        }

        .cyber-logo img:hover {
            transform: scale(1.1) rotate(5deg);
            filter: drop-shadow(0 0 25px rgba(255, 44, 237, 0.9));
        }

        .cyber-title {
            font-size: 32px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 20px;
            color: var(--neon-blue);
            text-shadow: var(--glow-blue);
            position: relative;
        }

        .cyber-title::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink));
            border-radius: 3px;
        }

        .cyber-team {
            list-style: none;
            padding: 0;
            margin: 30px 0;
        }

        .cyber-team li {
            position: relative;
            padding-left: 30px;
            margin-bottom: 15px;
            font-size: 16px;
            color: var(--cyber-text);
            transition: all 0.3s ease;
        }

        .cyber-team li::before {
            content: ">";
            position: absolute;
            left: 0;
            color: var(--neon-green);
            font-weight: bold;
        }

        .cyber-team li:hover {
            transform: translateX(10px);
            color: var(--neon-blue);
        }

        .cyber-register {
            text-align: center;
            margin-top: 30px;
        }

        .cyber-register a {
            color: var(--neon-pink);
            text-decoration: none;
            font-weight: bold;
            text-shadow: var(--glow-pink);
            transition: all 0.3s ease;
            display: inline-block;
        }

        .cyber-register a:hover {
            transform: scale(1.1);
            color: var(--neon-green);
        }

        /* 右侧登录表单 */
        .cyber-form {
            flex: 1;
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        .cyber-form::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                135deg,
                transparent 48%,
                rgba(255, 44, 237, 0.1) 50%,
                transparent 52%
            );
            animation: shine 8s infinite linear reverse;
        }

        .form-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--neon-pink);
            text-shadow: var(--glow-pink);
            text-align: center;
        }

        .form-subtitle {
            font-size: 14px;
            color: var(--cyber-text);
            text-align: center;
            margin-bottom: 40px;
            letter-spacing: 2px;
        }

        .cyber-input {
            position: relative;
            margin-bottom: 30px;
        }

        .cyber-input input {
            width: 100%;
            padding: 15px 20px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(0, 240, 252, 0.3);
            border-radius: 10px;
            color: var(--cyber-text);
            font-size: 16px;
            font-family: 'Orbitron', sans-serif;
            transition: all 0.5s ease;
            box-shadow: inset 0 0 10px rgba(0, 240, 252, 0.1);
        }

        .cyber-input input:focus {
            outline: none;
            border-color: var(--neon-pink);
            box-shadow:
                inset 0 0 15px rgba(255, 44, 237, 0.3),
                0 0 15px rgba(255, 44, 237, 0.5);
        }

        .cyber-input input::placeholder {
            color: rgba(224, 224, 255, 0.5);
        }

        .cyber-captcha {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
        }

        .cyber-captcha input {
            flex: 1;
        }

        .cyber-captcha img {
            width: 150px;
            height: 50px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid var(--neon-blue);
            box-shadow: var(--glow-blue);
        }

        .cyber-captcha img:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(0, 240, 252, 0.8);
        }

        .cyber-remember {
            display: flex;
            align-items: center;
            margin: 20px 0;
        }

        .cyber-remember input {
            appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid var(--neon-blue);
            border-radius: 5px;
            margin-right: 10px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .cyber-remember input:checked {
            background-color: var(--neon-blue);
            box-shadow: var(--glow-blue);
        }

        .cyber-remember input:checked::after {
            content: "✓";
            position: absolute;
            color: var(--dark-space);
            font-weight: bold;
            font-size: 14px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .cyber-remember label {
            color: var(--cyber-text);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .cyber-remember:hover label {
            color: var(--neon-green);
        }

        .cyber-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(90deg,
                var(--neon-blue),
                var(--neon-purple),
                var(--neon-pink));
            border: none;
            border-radius: 10px;
            color: white;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.5s ease;
            margin-top: 20px;
            position: relative;
            overflow: hidden;
            z-index: 1;
            box-shadow:
                0 0 15px rgba(0, 240, 252, 0.5),
                0 0 30px rgba(150, 0, 255, 0.3);
        }

        .cyber-btn:hover {
            transform: translateY(-5px);
            box-shadow:
                0 0 25px rgba(0, 240, 252, 0.7),
                0 0 50px rgba(150, 0, 255, 0.5);
        }

        .cyber-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
            );
            transition: all 0.5s ease;
            z-index: -1;
        }

        .cyber-btn:hover::before {
            left: 100%;
        }

        .cyber-footer {
            margin-top: 30px;
            text-align: center;
            font-size: 12px;
            color: var(--cyber-text);
        }

        .cyber-footer a {
            color: var(--neon-blue);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .cyber-footer a:hover {
            color: var(--neon-pink);
            text-shadow: var(--glow-pink);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .cyber-card {
                flex-direction: column;
                height: auto;
                width: 90%;
            }

            .cyber-panel, .cyber-form {
                padding: 30px;
            }

            .cyber-logo img {
                width: 100px;
            }

            .cyber-title {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
<!-- 赛博朋克网格背景 -->
<div class="cyber-grid"></div>

<!-- 粒子背景 -->
<div id="particles-js"></div>

<!-- 霓虹光带 -->
<div class="neon-strip" style="top: 20%; width: 200%; left: -100%; animation-delay: 0s;"></div>
<div class="neon-strip" style="top: 40%; width: 150%; left: -75%; animation-delay: 2s;"></div>
<div class="neon-strip" style="top: 60%; width: 180%; left: -90%; animation-delay: 4s;"></div>
<div class="neon-strip" style="top: 80%; width: 220%; left: -110%; animation-delay: 6s;"></div>

<!-- 3D登录卡片 -->
<div class="cyber-card">
    <!-- 左侧光效面板 -->
    <div class="cyber-panel">
        <div class="cyber-logo">
            <img th:src="@{/ruoyi.png}" alt="光宗耀祖" src="../static/ruoyi.png">
        </div>
        <h2 class="cyber-title">量子科技系统</h2>

        <ul class="cyber-team">
            <li>管理：谢宝乐</li>
            <li>总裁：孙晓圆</li>
            <li>财务：孙梦莹</li>
            <li>运营：王振辉</li>
            <li>宣传：王召权</li>
            <li>后勤：赵嘉铭</li>
        </ul>

        <div class="cyber-register" th:if="${isAllowRegister}">
            <span>还没有账号？</span>
            <a th:href="@{/register}">立即注册 &raquo;</a>
        </div>
    </div>

    <!-- 右侧登录表单 -->
    <div class="cyber-form">
        <h3 class="form-title">系统登录</h3>
        <p class="form-subtitle">请输入您的量子认证信息</p>

        <form id="signupForm" autocomplete="off">
            <div class="cyber-input">
                <input type="text" name="username" class="form-control uname" placeholder="用户名" value="admin">
            </div>

            <div class="cyber-input">
                <input type="password" name="password" class="form-control pword" placeholder="密码" value="admin123">
            </div>

            <div class="cyber-captcha" th:if="${captchaEnabled==true}">
                <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5">
                <a href="javascript:void(0);" title="点击更换验证码">
                    <img th:src="@{/captcha/captchaImage(type=${captchaType})}">
                </a>
            </div>

            <div class="cyber-remember" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'mt-4' : ''">
                <input type="checkbox" id="rememberme" name="rememberme">
                <label for="rememberme">记住我</label>
            </div>

            <button type="submit" class="cyber-btn" id="btnSubmit" data-loading="正在量子验证...">登 录</button>
        </form>

        <div class="cyber-footer">
            <div>https://gitee.com/sun-xiaoyuan123/pims5</div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    var ctx = [[@{/}]];
    var captchaType = [[${captchaType}]];
    var captchaEnabled = [[${captchaEnabled}]];
</script>
<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.8.0}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
<!-- 粒子效果库 -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<script>
    // 初始化粒子效果
    document.addEventListener('DOMContentLoaded', function() {
        // 粒子效果配置
        particlesJS('particles-js', {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: ["#0ff0fc", "#ff2ced", "#9600ff", "#00ff9d"] },
                shape: { type: "circle" },
                opacity: { value: 0.5, random: true },
                size: { value: 3, random: true },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: "#0ff0fc",
                    opacity: 0.3,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 3,
                    direction: "none",
                    random: true,
                    straight: false,
                    out_mode: "out"
                }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: { enable: true, mode: "repulse" },
                    onclick: { enable: true, mode: "push" }
                }
            }
        });

        // 输入框动画效果
        $('.cyber-input input').focus(function() {
            $(this).parent().css('transform', 'translateY(-5px)');
        }).blur(function() {
            $(this).parent().css('transform', 'translateY(0)');
        });

        // 创建更多霓虹光带
        function createNeonStrips() {
            for (let i = 0; i < 5; i++) {
                const strip = document.createElement('div');
                strip.className = 'neon-strip';
                strip.style.top = Math.random() * 100 + '%';
                strip.style.width = Math.random() * 100 + 100 + '%';
                strip.style.left = -Math.random() * 100 + '%';
                strip.style.animationDelay = Math.random() * 10 + 's';
                strip.style.animationDuration = Math.random() * 10 + 5 + 's';
                document.body.appendChild(strip);
            }
        }

        createNeonStrips();
    });
</script>
</body>
</html>